<template>
  <div class="page-login">
    <!-- 背景层 -->
    <div class="login-bg">
      <div class="login-bg-gradient"></div>
      <div class="login-bg-pattern"></div>
    </div>

    <!-- 主容器 -->
    <div class="login-container">
      <!-- 左侧品牌信息 -->
      <div class="login-brand">
        <div class="brand-logo">
          <img v-if="showData.logo" :src="showData.logo" :alt="showData.description" />
        </div>
        <div class="brand-slogan">
          <h1>{{ showData.description }}</h1>
          <p>{{ showData.slogan }}</p>
        </div>
      </div>

      <!-- 右侧登录表单 -->
      <div class="login-form-wrapper">
        <div class="login-form-card">
          <!-- 登录方式切换 -->
          <div class="login-tabs">
            <div 
              class="login-tab" 
              :class="{ active: passModel }"
              @click="passModel = true"
            >
              账号密码登录
            </div>
            <!-- <div 
              class="login-tab" 
              :class="{ active: !passModel }"
              @click="passModel = false"
            >
              企业微信登录
            </div> -->
          </div>

          <!-- 账号密码登录表单 -->
          <div v-show="passModel" class="form-content">
            <div class="input-group">
              <div class="input-icon">
                <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                  <path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"></path>
                  <circle cx="12" cy="7" r="4"></circle>
                </svg>
              </div>
              <input 
                type="text" 
                v-model="userInfo.userName" 
                :placeholder="$ts(['请输入', '账号'])"
                @keydown.enter="handleEnter('password')"
                autocomplete="off"
              >
            </div>

            <div class="input-group">
              <div class="input-icon">
                <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                  <rect x="3" y="11" width="18" height="11" rx="2" ry="2"></rect>
                  <path d="M7 11V7a5 5 0 0 1 10 0v4"></path>
                </svg>
              </div>
              <input 
                :type="showPwd ? 'text' : 'password'" 
                v-model="userInfo.password"
                ref="passwordInput"
                :placeholder="$ts(['请输入', '密码'])"
                @keydown.enter="login"
                autocomplete="off"
              >
              <button 
                type="button" 
                class="toggle-password"
                @click="showPwd = !showPwd"
                aria-label="切换密码显示状态"
              >
                <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                  <path v-if="showPwd" d="M17 10s.77-3.392 0-7a8 8 0 0 0-15.385 3.07.5.5 0 0 1-.949-.316A9 9 0 1 1 15.91 6.83" stroke-linecap="round" stroke-linejoin="round"></path>
                  <path v-if="showPwd" d="m2 2 20 20" stroke-linecap="round" stroke-linejoin="round"></path>
                  <circle v-if="!showPwd" cx="12" cy="12" r="10" stroke-linecap="round" stroke-linejoin="round"></circle>
                  <path v-if="!showPwd" d="M12 16v-4" stroke-linecap="round" stroke-linejoin="round"></path>
                  <path v-if="!showPwd" d="M12 8h.01" stroke-linecap="round" stroke-linejoin="round"></path>
                </svg>
              </button>
            </div>

            <button 
              class="login-button" 
              @click="login"
              :disabled="loading"
            >
              <span v-if="!loading">{{ $ts('登录') }}</span>
              <span v-if="loading" class="loading-spinner">
                <svg width="18" height="18" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M21 12C21 13.7652 20.5217 15.4869 19.6066 16.901C18.6915 18.3151 17.3807 19.3617 15.8787 19.9326C14.3766 20.5035 12.7362 20.5726 11.186 20.136C9.63578 19.6994 8.26106 18.7774 7.26106 17.5049C6.26106 16.2324 5.67774 14.6669 5.58301 13" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
                  <animateTransform attributeName="transform" type="rotate" from="0 12 12" to="360 12 12" dur="1s" repeatCount="indefinite"/>
                </svg>
                登录中...
              </span>
            </button>

            <div class="login-actions">
              <button type="button" class="action-link" @click="downloadPrint">
                下载打印插件
              </button>
              <el-tooltip class="box-item" effect="light" placement="right">
                <template #content>
                  <vueQr :text="qrText" :size="160" :margin="10"></vueQr>
                </template>
                <button type="button" class="action-link">
                  下载PDA
                </button>
              </el-tooltip>
            </div>
          </div>

          <!-- 企业微信登录 -->
          <div v-show="!passModel" class="form-content qrcode-login">
            <div class="qrcode-container">
              <div id="wxlogin" class="wechat-qrcode"></div>
              <p class="qrcode-desc">请使用企业微信扫码登录</p>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 页脚 -->
    <footer class="login-footer">
      <p>Copyright © {{ showData.copyYear }} {{ showData.copyright }} 版权所有</p>
    </footer>
  </div>
</template>

<script>
import { defineComponent, ref, reactive, toRefs, getCurrentInstance, onMounted, nextTick } from 'vue'
import { useRouter } from 'vue-router'
import store from '../store/index'
import http from '@/../src/api/http.js'
import { ElNotification, ElTooltip } from 'element-plus'
import vueQr from 'vue-qr/src/packages/vue-qr.vue'

export default defineComponent({
  components: {
    ElTooltip,
    vueQr
  },
  setup(props, context) {
    // 状态管理
    const loading = ref(false)
    const userInfo = reactive({
      userName: '',
      password: '',
      UUID: undefined,
    })
    const passwordInput = ref(null);
    const showPwd = ref(false)
    const passModel = ref(true)
    const qrText = ref(null)

    // 默认资源
    const defaultLogo = new URL('@/assets/imgs/dgz-logo.png', import.meta.url).href
    const defaultBackground = new URL('@/assets/imgs/dgz-bg.jpg', import.meta.url).href
    
    // 显示数据
    const showData = ref({
      description: '安泰稀土全自动倒角车间智能中控平台',
      // slogan: '支持企业推进数字化转型和智能化升级，提高效率、降低成本，为您带来竞争优势',
      background: '',
      copyright: '',
      logo: '',
      copyYear: "2024-2025"
    })

    // 实例和路由
    const { proxy } = getCurrentInstance()
    const appContext = getCurrentInstance().appContext
    const $message = appContext.config.globalProperties.$message
    const router = useRouter()
    const $ts = appContext.config.globalProperties.$ts

    // 登录处理
    const login = () => {
      if (!userInfo.userName) return $message.error($ts(['请输入', '账号']))
      if (!userInfo.password) return $message.error($ts(['请输入', '密码']))
      
      loading.value = true
      http
        .post('/api/user/login', userInfo, $ts('正在登录') + '....', { noMessage: true })
        .then((result) => {
          ElNotification({
            title: '登录成功',
            message: `欢迎您 ${userInfo.userName}`,
            type: 'success',
            offset: 35,
          })
          store.commit('setUserInfo', result)
          router.push({ path: '/' })
        })
        .catch((err) => {
          $message.error(err.message)
        })
        .finally(() => {
          loading.value = false
        })
    }

    // 处理回车键
    const handleEnter = (target) => {
      if (target === 'password') {
        nextTick(() => {
          passwordInput.value?.focus()
        })
      }
    }

    // 下载打印插件
    const downloadPrint = () => {
      window.open('http://124.222.220.210:9100/Upload/Tools/DgzImpTools.msi', '_blank')
    }

    // 获取PDA下载地址
    const getAppUrl = () => {
      http.get('api/Bas_Version/GetCurApkPkg').then(r => {
        if (r) {
          qrText.value = r?.PkgUrl ?? '暂未获取下载地址'
        }
      })
    }

    // 获取系统信息
    const getSystemInfo = () => {
      const data = { module: 1 }
      http.get('api/Bas_Parameter/GetParamerIniByModule', data).then(r => {
        if (r) {
          const logo = r.find(i => i.ParamName === 'system_logo')
          const bg = r.find(i => i.ParamName === 'system_login_bg')
          const copyright = r.find(i => i.ParamName === 'copyright')
          const copyYear = r.find(i => i.ParamName === 'copyYear')
          
          showData.value.logo = logo?.ParamValue || defaultLogo
          showData.value.copyright = copyright?.ParamValue || "安徽大工造"
          showData.value.copyYear = copyYear?.ParamValue || "2024-2025"
          showData.value.background = bg?.ParamValue || defaultBackground
        }
      })
    }

    // 初始化
    onMounted(() => {
      getAppUrl()
      getSystemInfo()
    })

    return {
      loading,
      userInfo,
      showData,
      showPwd,
      passModel,
      qrText,
      passwordInput,
      login,
      downloadPrint,
      handleEnter
    }
  }
})
</script>

<style lang="less" scoped>
// 全局样式
.page-login {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  color: #333;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

// 背景样式
.login-bg {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  background: #f5f7fa;
  overflow: hidden;

  &-gradient {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, #1a56db 0%, #4338ca 100%);
    opacity: 0.9;
  }

  &-pattern {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.05'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  }
}

// 主容器
.login-container {
  display: flex;
  flex: 1;
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 40px 20px;
  box-sizing: border-box;
  align-items: center;
}

// 品牌信息
.login-brand {
  flex: 1;
  color: #fff;
  padding-right: 60px;

  .brand-logo {
    margin-bottom: 40px;
    img {
      max-height: 60px;
      filter: drop-shadow(0 2px 4px rgba(0,0,0,0.1));
    }
  }

  .brand-slogan {
    h1 {
      font-size: 2.5rem;
      font-weight: 600;
      margin: 0 0 20px 0;
      text-shadow: 0 2px 4px rgba(0,0,0,0.1);
    }
    p {
      font-size: 1.1rem;
      opacity: 0.9;
      max-width: 500px;
      line-height: 1.6;
      margin: 0;
    }
  }
}

// 登录表单容器
.login-form-wrapper {
  width: 400px;
  flex-shrink: 0;
}

// 表单卡片
.login-form-card {
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
  overflow: hidden;
  transition: transform 0.3s ease;

  &:hover {
    transform: translateY(-5px);
  }
}

// 登录选项卡
.login-tabs {
  display: flex;
  border-bottom: 1px solid #f0f0f0;

  .login-tab {
    flex: 1;
    padding: 18px 0;
    text-align: center;
    font-size: 16px;
    font-weight: 500;
    color: #666;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;

    &.active {
      color: #165dff;
      font-weight: 600;

      &::after {
        content: '';
        position: absolute;
        bottom: -1px;
        left: 0;
        width: 100%;
        height: 3px;
        background: #165dff;
        border-radius: 3px 3px 0 0;
      }
    }

    &:hover:not(.active) {
      color: #333;
      background-color: #f5f7fa;
    }
  }
}

// 表单内容
.form-content {
  padding: 30px 35px;

  .input-group {
    position: relative;
    margin-bottom: 20px;

    input {
      width: 100%;
      height: 50px;
      padding: 0 15px 0 45px;
      border: 1px solid #dcdfe6;
      border-radius: 8px;
      font-size: 15px;
      transition: all 0.3s ease;
      box-sizing: border-box;

      &::placeholder {
        color: #c0c4cc;
      }

      &:focus {
        outline: none;
        border-color: #165dff;
        box-shadow: 0 0 0 3px rgba(22, 93, 255, 0.1);
      }
    }

    .input-icon {
      position: absolute;
      left: 15px;
      top: 50%;
      transform: translateY(-50%);
      color: #909399;
    }

    .toggle-password {
      position: absolute;
      right: 15px;
      top: 50%;
      transform: translateY(-50%);
      background: transparent;
      border: none;
      color: #909399;
      cursor: pointer;
      padding: 5px;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: color 0.2s ease;

      &:hover {
        color: #165dff;
      }
    }
  }

  .login-button {
    width: 100%;
    height: 50px;
    background: #165dff;
    color: #fff;
    border: none;
    border-radius: 8px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;

    &:hover {
      background: #0e4bdb;
      box-shadow: 0 4px 12px rgba(22, 93, 255, 0.3);
    }

    &:active {
      background: #003cc5;
    }

    &:disabled {
      background: #a0b7ff;
      cursor: not-allowed;
      box-shadow: none;
    }

    .loading-spinner {
      display: flex;
      align-items: center;
      gap: 8px;
    }
  }

  .login-actions {
    display: flex;
    justify-content: space-between;
    margin-top: 25px;

    .action-link {
      color: #165dff;
      background: none;
      border: none;
      font-size: 14px;
      cursor: pointer;
      padding: 5px 0;
      transition: color 0.2s ease;

      &:hover {
        color: #0e4bdb;
        text-decoration: underline;
      }
    }
  }
}

// 二维码登录样式
.qrcode-login {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 40px 35px;

  .qrcode-container {
    text-align: center;

    .wechat-qrcode {
      width: 200px;
      height: 200px;
      margin: 0 auto;
      padding: 10px;
      background: #fff;
      box-shadow: 0 2px 10px rgba(0,0,0,0.1);
      border-radius: 8px;
    }

    .qrcode-desc {
      margin-top: 20px;
      color: #666;
      font-size: 14px;
    }
  }
}

// 页脚
.login-footer {
  padding: 20px;
  color: rgba(255, 255, 255, 0.7);
  font-size: 14px;

  p {
    margin: 0;
    text-align: center;
  }
}

// 响应式设计
@media (max-width: 992px) {
  .login-container {
    flex-direction: column;
    padding: 30px 20px;
  }

  .login-brand {
    padding-right: 0;
    margin-bottom: 40px;
    text-align: center;

    .brand-slogan {
      h1 {
        font-size: 2rem;
      }
      p {
        margin: 0 auto;
      }
    }
  }

  .login-form-wrapper {
    width: 100%;
    max-width: 400px;
  }
}

@media (max-width: 576px) {
  .form-content {
    padding: 25px 20px;
  }

  .login-brand {
    .brand-slogan {
      h1 {
        font-size: 1.8rem;
      }
    }
  }
}
</style>